import React, { useState, useRef } from 'react';

import { useDrag, useDrop } from 'react-dnd';

// interface ItemType {
//   item: number;
//   index: number;
//   type: string;
//   list: any;
//   setList: any;
// }

function VDraggable(props) {
  const { item, index, type, list, setList } = props;
  const style = {
    padding: '10px',
    marginBottom: '10px',
    border: '1px solid #223123',
    cursor: 'move',
    textAlign: 'center',
  };

  let ref = useRef();
  // useDrop的accept和useDrag的type相同才能相互拖拽
  const [, drop] = useDrop({
    accept: type,
    collect: () => ({}),
    hover(item, monitor) {
      // 拖拽的索引
      const dragIndex = item.index;
      // 放置目标的索引
      const hoverIndex = index;
      // 如果拖拽目标和放置目标相同就return
      if (dragIndex === hoverIndex) return;
      const { top, bottom } = ref.current.getBoundingClientRect();
      // 放置目标半的高度
      const halOfHoverHeigth = (bottom - top) / 2;
      const { y } = monitor.getClientOffset();
      const hoverClientY = y - top;
      // 当移动到防止目标一半时切换位置
      if (
        (dragIndex < hoverIndex && hoverClientY > halOfHoverHeigth) ||
        (dragIndex > hoverIndex && hoverClientY < halOfHoverHeigth)
      ) {
        const dragItem = list[dragIndex];
        list.splice(dragIndex, 1);
        list.splice(hoverIndex, 0, dragItem);
        setList([...list]);

        item.index = hoverIndex;
      }
    },
  });
  const [{ isDragging }, drag] = useDrag({
    type,
    item: () => ({ item, index }),
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  const opacity = isDragging ? 1 : 0.6;
  drag(drop(ref));

  return (
    <div className="ooo" ref={ref} style={{ ...style, opacity }}>
      {item.name} {item.id}
    </div>
  );
}
export default VDraggable;
